Introduction
UI/UX对于前端开发来说还是很重要的，可以让用户体验更好。
老师从Steve Schoger和Erik Kennedy学会的这些design技巧。
这门课不涉及到代码，只是展示一些设计稿，看能够怎么优化。
How to Improve Boring Tables
原始设计稿：
1、合并一些列的内容，会显示的更好。first name和last name合并了，company和position合并了，date和time合并了。并且table head设置了背景色，更突出了。
2、Actions列，只有当用户的鼠标悬浮到某一行时，才显示这里面的按钮。并且设置table body里面的行有间隔的颜色。
3、可以为status列添加tag样式。
如果这个表格里面的修改功能，只是修改type或者schedule的话，那么可以直接在上面进行修改，那么action列就变为了email列，操作按钮就只剩下发送邮件了。这个还是要根据实际情况来。
How to Handle Image Quirks
1、案例1
原始设计稿：
JAPAN和ICELAND，文字不容易辨别。
可以添加一个overlay，凸显出文字：
更进一步的，我们可以使用gradient渐变，从底部开始到顶部结束。
关键代码：
2、案例2
这个设计稿很好，但是有一个小问题，就是有一些avatars的背景色和整个页面的背景色相差不是很大，很难让人区分出avatar的边界在哪里。
可以为每一个avatar加一个inset shadow
关键代码：
How to Fix Boring Empty States
比如说一个电商网站，有数据的时候可能是这样，还不错：
但是没有数据的时候就是这样，看上去很空旷：
有可能我们会添加一些提示信息，像这样：
但是这样的效果也不好，可以像下面这样设计，有图片、文字、还有按钮可以操作：
How to Improve UI with Cards
1、案例1
有些时候，可以使用cards来代替table，只要信息不是太多的话都可以。比如说下面这个table。
2、案例2
当不在form里面使用selection时，可以考虑使用cards来当作radio buttons来使用：
改成这样，直接点击card进行选择：
可以进一步设计成这样：
How to Create Better Forms
原始设计稿：
1、按钮的文字没有准确表达出含义，应该改成Sign Up
2、有研究表明，sign in和sign up，这两个文字需要用户一段实际去区分二者的区别，所以最好写更加具体的文字。比如说sign up变为create account，sign in变为login
3、在创建表单的时候，默认把每一项都当作强制填写的，取消掉强制填写的form-item上面的星号asterisk。当某一项非必填时，添加上optional。
这个还是要根据具体表单来，看UI要求是什么。但是我看AWS好像就是这么做的，我创建AWS账号的时候，没有看到必填项的星号。
4、form label的排列，可以排列成右对齐，但是更好的办法是在input里面使用placeholder来当作form label，而非input的元素使用上下排列的方式来显示label
5、可以将password输入框和confirm password输入框合并，使用toggle visibility icon来显示/隐藏密码，同时加上hint提示。
6、最好还是给每一个form item添加上label，因为这是最好的提示，此时的placeholder可以给出输入框内容的格式信息
7、因为横向的radio buttons或者checkbox，用户可能不知道选择框是属于哪个选项的，所以如果有位置的话，可以改成垂直的。如果没有位置的话，radio buttons可以改为button group的样式：
8、设置在blur的时候触发校验，然后显示错误信息。如果form item下面有提示信息，那么错误信息不用覆盖了提示信息，要都显示出来，因为提示信息可以帮助用户修复错误。
9、form label要与输入框的字体区分开来，可以使用font-weight或者font-size来区分。
How to Improve Text Content
1、一般来说，我们在项目中都只使用一种字体。
推荐在字体比较大的时候，使用一种字体。字体小的时候，使用另一种字体。
那具体该怎么选择字体呢？可以访问fontjoy.com，来测试比较。
2、为了强调某些内容，我们倾向于设置更大的字号，但是在UI显示时，效果并不好。为了让数字更显眼，我们会加大数字的字号，但这个效果不好。
加重font-weight，有更好的效果。
3、text truncation 文字截断。我们一般是加上ellipsis，省略号来表示。如果是标题文字，可以加上tooltip来显示完整内容。如果是content文字，最好是在最后两个单词上面加上渐变效果。
使用CSS的代码，参考：https://css-tricks.com/line-clampin/
How to Work With Colors
1、brand icon的颜色做参考，主题色要包含brand icon的颜色。
下面的app，brand icon是绿色的，那么就需要在这个颜色的基础上，向gray方向移动，找到一种颜色作为主题色。右边的效果就好一些。
2、添加合适数量的primary color，来突出按钮、tabs等等元素
3、dark mode
light mode切换到dark mode，不是简单的白色变为黑色，黑色变为白色。需要考虑协调性，老师将brand icon的颜色加了进来，看上去协调多了
